<template>
	<view style="width: 100vw;background-color: #fff;">
		<view>
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
				activeColor="#FF5A5F"></uni-segmented-control>
			<view style="margin-top: 2vh;">
				<view v-show="current === 0">
					<!-- 领取更多好券 -->
					<view style="width: 92vw;margin-left: 4vw;height: 7vh;border: 1px solid #F1F1F1;display: flex;box-shadow: 0px 5px 4px 2px pink;">
						<view style="width: 15vw;height: 7vh;">
							<image src="../../../static/images/LYhj.png" style="width: 8vw;height: 4vh;margin-top: 1vh;margin-left: 2vw;" mode=""></image>
						</view>
						<view style="width: 70vw;height: 7vh;font-size: 0.8rem;font-weight: bold;line-height: 7vh;">
							领更多好卷
						</view>
					</view>
					<!-- 优惠券 -->
					<view style="width: 92vw;height: 15vh;margin-left: 4vw; box-shadow: 0px 5px 4px 2px pink;margin-top: 3vh;display: flex;">
						<view style="width: 20vw;height: 15vh;color: red;text-align: center;margin-top: 3vh;">
							￥<text style="font-size: 2rem;font-weight: bold;">5</text>
							<view style="width: 13vh;text-align: center;font-size: 0.5rem;color: red;">无门槛</view>
						</view>
						<!-- 券类型 -->
						<view style="width: 65vw;height: 15vh;">
							<view style="color: #999;font-size: 0.8rem;margin-top: 3vh;font-weight: bold;">新人红包券</view>
							<view style="font-size: 0.4rem;color: #999;margin-top: 1vh;font-weight: bold;">2021.2.9-2021.3.3</view>
						</view>
						<!-- 使用 -->
						<view style="width: 20vw;height: 15vh;">
							<view style="font-size: 0.5rem; width: 13vw;border-radius: 20px; margin-top: 5vh; height: 4vh;line-height: 4vh;color: #fff;text-align: center; background-color: #FF5A5F;">
								去使用
							</view>
						</view>
						
					</view>
					<!-- 优惠券 -->
					<view style="width: 92vw;height: 15vh;margin-left: 4vw; box-shadow: 0px 5px 4px 2px pink;margin-top: 3vh;display: flex;">
						<view style="width: 20vw;height: 15vh;color: red;text-align: center;margin-top: 3vh;">
							￥<text style="font-size: 2rem;font-weight: bold;">5</text>
							<view style="width: 13vh;text-align: center;font-size: 0.5rem;color: red;">无门槛</view>
						</view>
						<!-- 券类型 -->
						<view style="width: 65vw;height: 15vh;">
							<view style="color: #999;font-size: 0.8rem;margin-top: 3vh;font-weight: bold;">新人红包券</view>
							<view style="font-size: 0.4rem;color: #999;margin-top: 1vh;font-weight: bold;">2021.2.9-2021.3.3</view>
						</view>
						<!-- 使用 -->
						<view style="width: 20vw;height: 15vh;">
							<view style="font-size: 0.5rem; width: 13vw;border-radius: 20px; margin-top: 5vh; height: 4vh;line-height: 4vh;color: #fff;text-align: center; background-color: #FF5A5F;">
								去使用
							</view>
						</view>
						
					</view>
					
					
				</view>
				<view v-show="current === 1">
					<!-- 优惠券 -->
					<view style="width: 92vw;height: 15vh;margin-left: 4vw; box-shadow: 0px 5px 4px 2px pink;margin-top: 3vh;display: flex;">
						<view style="width: 20vw;height: 15vh;color: red;text-align: center;margin-top: 3vh;">
							￥<text style="font-size: 2rem;font-weight: bold;">5</text>
							<view style="width: 13vh;text-align: center;font-size: 0.5rem;color: red;">无门槛</view>
						</view>
						<!-- 券类型 -->
						<view style="width: 65vw;height: 15vh;">
							<view style="color: #999;font-size: 0.8rem;margin-top: 3vh;font-weight: bold;">新人红包券</view>
							<view style="font-size: 0.4rem;color: #999;margin-top: 1vh;font-weight: bold;">2021.2.9-2021.3.3</view>
						</view>
						<!-- 使用 -->
						<view style="width: 20vw;height: 15vh;">
							<view style="font-size: 0.5rem; width: 13vw;border-radius: 20px; margin-top: 5vh; height: 4vh;line-height: 4vh;color: #fff;text-align: center; background-color: #FF5A5F;">
								已使用
							</view>
						</view>
						
					</view>
					
					
				</view>
		 	<view v-show="current === 2">
					
					<!-- 优惠券 -->
					<view style="width: 92vw;height: 15vh;margin-left: 4vw; box-shadow: 0px 5px 4px 2px pink;margin-top: 3vh;display: flex;">
						<view style="width: 20vw;height: 15vh;color: red;text-align: center;margin-top: 3vh;">
							￥<text style="font-size: 2rem;font-weight: bold;">5</text>
							<view style="width: 13vh;text-align: center;font-size: 0.5rem;color: red;">无门槛</view>
						</view>
						<!-- 券类型 -->
						<view style="width: 65vw;height: 15vh;">
							<view style="color: #999;font-size: 0.8rem;margin-top: 3vh;font-weight: bold;">新人红包券</view>
							<view style="font-size: 0.4rem;color: #999;margin-top: 1vh;font-weight: bold;">2021.2.9-2021.3.3</view>
						</view>
						<!-- 使用 -->
						<view style="width: 20vw;height: 15vh;">
							<view style="font-size: 0.5rem; width: 13vw;border-radius: 20px; margin-top: 5vh; height: 4vh;line-height: 4vh;color: #fff;text-align: center; background-color: #FF5A5F;">
								已失效
							</view>
						</view>
						
					</view>
					
					
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['未使用', '已使用', '已过期/失效'],
				current: 0
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		}
	}
</script>

<style>
</style>
